<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"/>
		<meta name="apple-mobile-web-app-capable" content="yes"/>
		<meta name="apple-mobile-web-app-status-bar-style" content="black"/>
		<link rel="stylesheet" type="text/css" href="../css/mui.min.css"/>
		<style type="text/css">
			.mui-table-view{
				background: transparent;
			}
			.mui-table-view:after{
				height: 0;
			}
			.mui-table-view:before{
				height: 0;
			}
			.mui-table-view-cell{
				margin: 5% 2.5%;
				width: 95%;
				height: auto;
				border-radius: 10px 10px;
				/*background-color: white;*/
				border: 2px gray solid;
			}
			.ordernum{
				color: black;
			}
			.mui-pull-right{
				color: orange;
			}
			.ui-link{
			}
			.ui-link-des{
				width: 60%;	
				white-space: pre-wrap;
				display: inline-block;
				font-size: 12px;
				vertical-align: top;
			}
			.mui-control-content{
				padding: 1% 1%;
				margin: 7% 0 0;
			}
			#tabcard{
				position: fixed;
				top: 7%;
				left: 0;
				z-index: 100;
				background: white;
			}
		</style>
	</head>
	<body>
		<header class="mui-bar mui-bar-nav" style="height: 7%;">
			<span class="mui-pull-left mui-icon mui-icon-left-nav" onclick="back()"></span>
			<div class="mui-title">我的订单</div>
		</header>
		<div>
			<div class="mui-segmented-control" id="tabcard">
				<a href="#item1" class="mui-control-item mui-active">
						全部
					</a>
				<a href="#item2" class="mui-control-item">待付款</a>
				<a href="#item3" class="mui-control-item">待发货</a>
				<a href="#item4" class="mui-control-item">待收货</a>
				<a href="#item5" class="mui-control-item">退换货</a>
			</div>
		</div>
		<div class="mui-content">
				<div id="item1" class="mui-control-content mui-active">
						<ul class="mui-table-view pullUp">
							<li class="mui-table-view-cell">
								<p style="height: auto;"><span class="mui-left ordernum">订单编号:data</span><span class="mui-pull-right">待付款</span></p>
								<div class="ui-link">
									<img  src="123.jpg" style="width: 60px;height: 60px ;" />
									<span class="mui-center ui-link-des">英国原装进口Lebay/丽贝拉拉裤6号XXL码20片超薄干爽透气学步裤全国包邮</span>
									<span  style="font-size: 12px; display: inline-block;vertical-align: top;">
										<span>¥ {{data}}</span><br />
										<span>*1</span>
									</span>
								</div>
								<p>共data件商品  快递：¥data 订单金额:¥ </p>
								<div class="mui-button-row">
									<button type="button" class="mui-btn mui-btn-success orderDetail" link="1">订单详情</button>
									<button type="button" class="mui-btn mui-btn-default">关闭订单</button>
									<button type="button" class="mui-btn mui-btn-red">订单付款</button>
								</div>
							</li>
							
						</ul>
				</div>
				<div id="item2" class="mui-control-content">
					<ul class="mui-table-view pullUp">
						
					</ul>
				</div>
				<div id="item3" class="mui-control-content">
					<ul class="mui-table-view pullUp">
						
					</ul>
				</div>
				<div id="item4" class="mui-control-content">
					<ul class="mui-table-view pullUp">
						
					</ul>
				</div>
				<div id="item5" class="mui-control-content">
					<ul class="mui-table-view pullUp">
						
					</ul>
				</div>
		</div>
		
		<script src="../js/mui.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/common.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/config.js"></script>
		<script type="text/javascript">
			mui.init();
			mui.plusReady(function(){
				var ws = plus.webview.currentWebview();
				var wo = ws.opener();
				
				ws.show('pop-in');
				wo.evalJS('closeWaiting()');
				
				/**
				 * 判断是否缓存storge有数据
				 */
				var order_data = plus.storage.getItem('order_data'); 
				if(order_data){
				}else{
					getData('inner');
				}
				
				
			});
			//绑定订单详情按钮单击事件
			mui('.mui-content').on('tap','.orderDetail',function(){
				var alink = this.getAttribute('link');
				var data = {
					c:alink
				};
				//传参 url 动画效果  是否自动显示  窗口属性（style）   data为extra额外参数
				var toWs = clicked('orderDetail.html',true,true,{},data);
			});
			
			/**
			 * 简单的上拉加载
			 */
			/*var pullUp = document.getElementsByClassName('pullUp')[0];
			pullUp.addEventListener('dragend',function(){
				alert(window.innerHeight); //获取滚动区域高度
				alert(document.body.scrollTop);
				alert(document.body.scrollHeight);
				
				if(window.innerHeight + document.body.scrollTop == document.body.scrollHeight){
					alert('嘻嘻嘻');
				}
			});*/
			
						
			
			/**
			 * @return ajax获取订单数据
			 */
			var getData = function(type){
				var ip = ipconfig().ip;
				mui.ajax(ip+'Order.getOrderData',{
					data:{openid:'20161011116366904671'},
					dataType:'json',
					timeout:10000,
					type:'get',
					headers:{'Content-type':'application/json'},
					success:function(data){
						if(data.data.code == 0){
							loadData(data.data.data,type);
						}
					},error:function(data){
						
					}
				});
			}
			
			/**
			 * @return 载入dom
			 * @param {payhtml} 待付款dom
			 * @param {sendhtml} 待发货dom
			 * @param {gethtml} 待收货dom
			 * @param {eschtml} 退换货dom
			 */
			var loadData = function (data,type){
				var html = [];
				var payhtml = [];
				var sendhtml = [];
				var gethtml = [];
				var eschtml = [];
				
				var parentNode = document.getElementsByClassName('pullUp')[0];
				
				var payNode = document.getElementsByClassName('pullUp')[1];
				var sendNode = document.getElementsByClassName('pullUp')[2];
				var getNode = document.getElementsByClassName('pullUp')[3];
				var escNode = document.getElementsByClassName('pullUp')[4];
				mui.each(data,function(index,item){
					//判断订单状态
					var statusName = '';
					switch (item.status){
						case '-6':
							statusName = '已退款';
							break;
						case '-5':
							statusName = '已退货';
							break;
						case '-4':
							statusName = '退货中';
							break;
						case '-3':
							statusName = '换货中';
							break;
						case '-2':
							statusName = '退款中';
							break;
						case '-1':
							statusName = '已取消';
							break;
						case '0':
							statusName = '待付款';
							break;
						case '1':
							statusName = '已付款';
							break;
						case '2':
							statusName = '待收货';
							break;
						case '3':
							statusName = '已完成';
							break;
						default:
							statusName = '异常状态订单';
							break;
					};
	/*==========================重新载入/第一次载入dom时==========================*/
					html.push('<li class="mui-table-view-cell"><p style="height:auto;"><span class="mui-left ordernum">订单编号:'+item.ordersn+'</span><span class="mui-pull-right">'+statusName+'</span></p>');
					mui.each(item.ordergoods,function(index,item){
						html.push('<div glink="'+item.goodsid+'" class="ui-link"><img  src="'+ipconfig().jpg+item.thumb+'" style="width: 60px;height: 60px ;" /><span class="mui-center ui-link-des">'+item.title+'</span><span  style="font-size: 12px; display:inline-block;vertical-align: top;"><span>¥ '+item.price+'</span><br /><span>*'+item.total+'</span></span></div>');
					});
					html.push('<p>共'+item.ordergoods.length+'件商品  快递：¥ '+item.dispatchprice+' 订单金额:¥ '+item.price+'</p><div class="mui-button-row"><button type="button" class="mui-btn mui-btn-success orderDetail" link="'+item.id+'">订单详情</button><button type="button" class="mui-btn mui-btn-default">关闭订单</button><button type="button" class="mui-btn mui-btn-red">订单付款</button></div></li>');
					
					if(item.status==0){
						payhtml.push('<li class="mui-table-view-cell"><p style="height:auto;"><span class="mui-left ordernum">订单编号:'+item.ordersn+'</span><span class="mui-pull-right">'+statusName+'</span></p>');
						mui.each(item.ordergoods,function(index,item){
							payhtml.push('<div glink="'+item.goodsid+'" class="ui-link"><img  src="'+ipconfig().jpg+item.thumb+'" style="width: 60px;height: 60px ;" /><span class="mui-center ui-link-des">'+item.title+'</span><span  style="font-size: 12px; display:inline-block;vertical-align: top;"><span>¥ '+item.price+'</span><br /><span>*'+item.total+'</span></span></div>');
						});
						payhtml.push('<p>共'+item.ordergoods.length+'件商品  快递：¥ '+item.dispatchprice+' 订单金额:¥ '+item.price+'</p><div class="mui-button-row"><button type="button" class="mui-btn mui-btn-success orderDetail" link="'+item.id+'">订单详情</button><button type="button" class="mui-btn mui-btn-default">关闭订单</button><button type="button" class="mui-btn mui-btn-red">订单付款</button></div></li>');
					};
					
					if(item.status==1){
						sendhtml.push('<li class="mui-table-view-cell"><p style="height:auto;"><span class="mui-left ordernum">订单编号:'+item.ordersn+'</span><span class="mui-pull-right">'+statusName+'</span></p>');
						mui.each(item.ordergoods,function(index,item){
							sendhtml.push('<div glink="'+item.goodsid+'" class="ui-link"><img  src="'+ipconfig().jpg+item.thumb+'" style="width: 60px;height: 60px ;" /><span class="mui-center ui-link-des">'+item.title+'</span><span  style="font-size: 12px; display:inline-block;vertical-align: top;"><span>¥ '+item.price+'</span><br /><span>*'+item.total+'</span></span></div>');
						});
						sendhtml.push('<p>共'+item.ordergoods.length+'件商品  快递：¥ '+item.dispatchprice+' 订单金额:¥ '+item.price+'</p><div class="mui-button-row"><button type="button" class="mui-btn mui-btn-success orderDetail" link="'+item.id+'">订单详情</button><button type="button" class="mui-btn mui-btn-default">关闭订单</button><button type="button" class="mui-btn mui-btn-red">订单付款</button></div></li>');
					}
					
					if(item.status==2){
						gethtml.push('<li class="mui-table-view-cell"><p style="height:auto;"><span class="mui-left ordernum">订单编号:'+item.ordersn+'</span><span class="mui-pull-right">'+statusName+'</span></p>');
						mui.each(item.ordergoods,function(index,item){
							gethtml.push('<div glink="'+item.goodsid+'" class="ui-link"><img  src="'+ipconfig().jpg+item.thumb+'" style="width: 60px;height: 60px ;" /><span class="mui-center ui-link-des">'+item.title+'</span><span  style="font-size: 12px; display:inline-block;vertical-align: top;"><span>¥ '+item.price+'</span><br /><span>*'+item.total+'</span></span></div>');
						});
						gethtml.push('<p>共'+item.ordergoods.length+'件商品  快递：¥ '+item.dispatchprice+' 订单金额:¥ '+item.price+'</p><div class="mui-button-row"><button type="button" class="mui-btn mui-btn-success orderDetail" link="'+item.id+'">订单详情</button><button type="button" class="mui-btn mui-btn-default">关闭订单</button><button type="button" class="mui-btn mui-btn-red">订单付款</button></div></li>');
					}
					
					if(item.status<= -2){
						eschtml.push('<li class="mui-table-view-cell"><p style="height:auto;"><span class="mui-left ordernum">订单编号:'+item.ordersn+'</span><span class="mui-pull-right">'+statusName+'</span></p>');
						mui.each(item.ordergoods,function(index,item){
							eschtml.push('<div glink="'+item.goodsid+'" class="ui-link"><img  src="'+ipconfig().jpg+item.thumb+'" style="width: 60px;height: 60px ;" /><span class="mui-center ui-link-des">'+item.title+'</span><span  style="font-size: 12px; display:inline-block;vertical-align: top;"><span>¥ '+item.price+'</span><br /><span>*'+item.total+'</span></span></div>');
						});
						eschtml.push('<p>共'+item.ordergoods.length+'件商品  快递：¥ '+item.dispatchprice+' 订单金额:¥ '+item.price+'</p><div class="mui-button-row"><button type="button" class="mui-btn mui-btn-success orderDetail" link="'+item.id+'">订单详情</button><button type="button" class="mui-btn mui-btn-default">关闭订单</button><button type="button" class="mui-btn mui-btn-red">订单付款</button></div></li>');
					}
	/*==================================END====================================*/
				});
				if(type == 'inner'){
					parentNode.innerHTML = html.join("");
					payNode.innerHTML = payhtml.join("");
					sendNode.innerHTML = sendhtml.join("");
					getNode.innerHTML = gethtml.join("");
					escNode.innerHTML = eschtml.join("");
				}		
				
			}
			
			
			
		</script>
	</body>
</html>
